<template>
  <div id="configureTagsList">
    <h1 class="con-right-title">
      标签明细
    </h1>
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <!-- 操作按钮部分 -->
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:tagsDetail:add'"
            type="warning"
            icon="el-icon-plus"
            @click="handelAdd"
          >
            添加标签
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          @selection-change="selectChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column type="index" width="60" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            min-width="90"
            label="标签ID"
          ></el-table-column>
          <el-table-column
            prop="labelName"
            min-width="120"
            label="标签名称"
          ></el-table-column>
          <el-table-column
            prop="labelCategoryName"
            min-width="120"
            label="所属标签分类"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="labelProperty"
            min-width="140"
            label="标签属性"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.labelProperty"
                :class="scope.row.labelProperty | filterClass('labelPrope')"
                >{{ scope.row.labelProperty | filterName('labelPrope') }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            label="包含内容数"
            prop="count"
            min-width="130"
            align="center"
          ></el-table-column>
          <el-table-column
            label="创建者"
            prop="createUser.userName"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="createdDate"
            width="160"
            label="创建时间"
          ></el-table-column>
          <el-table-column prop="enabled" width="120" label="标签状态">
            <template slot-scope="scope">
              <span v-if="scope.row.enabled === true">启用</span>
              <span v-if="scope.row.enabled === false">停用</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                v-permission="'wh:system:tagsDetail:edit'"
                type="text"
                @click="handelAdd('edit', scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-permission="'wh:system:tagsDetail:remove'"
                v-if="scope.row.enabled === false"
                type="text"
                @click="remove(scope.row.id)"
              >
                删除
              </el-button>
              <el-button
                v-permission="'wh:system:tagsDetail:content'"
                type="text"
                @click="changeView(scope.row.id)"
              >
                查看聚合内容
              </el-button>
              <el-button
                v-permission="'wh:system:tagsDetail:merge'"
                type="text"
                @click="showLabelMerge(scope.row)"
              >
                标签合并
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
        <!-- 添加标签弹窗 -->
        <addDialog
          v-if="dialogAddData.isShow"
          :dialogAddData="dialogAddData"
          :nameLength="nameLength"
          @refresh="refresh"
        >
        </addDialog>
        <!-- 标签合并弹窗 -->
        <dialogMerge
          v-if="dialogMerge.isShow"
          :dialogData="dialogMerge"
          @refresh="refresh"
        >
        </dialogMerge>
      </div>
    </div>
  </div>
</template>
<script>
import { disable, enable } from '@/api/contentTags/configureTag' // 接口
import {
  getConTagsList,
  delLable,
  putTagsugge
} from '@/api/contentTags/configureTation' // 接口
import { getKeyValue } from '@/api/system/parameter' // 接口
import topSearch from '@component/contentTags/configureLabelClassification/topSearch' // 上部搜索条件
import addDialog from '@component/contentTags/configureLabelClassification/addDialog' // 添加标签
import dialogMerge from '@component/contentTags/configureLabelClassification/dialogMerge' // 添加标签
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'particulars',
  msg: '标签配置',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    addDialog,
    dialogMerge
  },
  data() {
    return {
      loading: false,
      total: 10,
      pageName: 'configureLableTags',
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        enabled: '', // 标签状态
        labelProperty: '', // 标签属性
        labelCategoryName: '', // 分类名称
        labelId: '', // 标签ID
        labelName: '' // 标签名称
      },
      dialogAddData: {
        isShow: false,
        type: '',
        params: {}
      }, //新增编辑
      dialogMerge: {
        isShow: false,
        params: {}
      }, //标签合并
      // 选中行的数据
      selectData: [],
      nameLength: 0,
      powerStr: 'system:configureTagsClassify:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.getTagNameLength()
    // 获取权限
    this.init()
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },

  methods: {
    /* 进入页面执行的方法 */
    init() {
      if (this.$route.query.labelPrope) {
        this.isDisabled = true
        this.formInline.labelProperty = this.$route.query.labelPrope
        this.formInline.labelCategoryName = this.$route.query.labelCategory
      } else {
        this.isDisabled = false
      }
    },
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        } else {
          this.canShowPage = true
          this.getTagNameLength()
        }
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getConTagsList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /*获取标签名称长度*/
    getTagNameLength() {
      let obj = {
        configKey: 'content_label_count'
      }
      getKeyValue(
        obj,
        (response) => {
          this.nameLength = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 选择框改变事件
    selectChange(value) {
      this.selectData = value
      this.isDisabled = !(this.selectData.length > 0)
    },
    // 添加标签
    handelAdd(type = 'add', row = {}) {
      this.dialogAddData.isShow = true
      this.dialogAddData.type = type
      this.dialogAddData.params = row
    },
    /*标签合并*/
    showLabelMerge(row) {
      this.dialogMerge.isShow = true
      this.dialogMerge.params = row
    },
    // 删除标签
    remove(id) {
      this.$confirm('确定要删除标签名称下的所有帖子么？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delLable(
            id,
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /* 查看详情跳转页面 */
    changeView(id) {
      let query = {
        from: this.pageName,
        id
      }
      this.$router.push({
        name: 'wh:poly:content:show',
        query: query
      })
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less" scoped>
#configureTagsList {
  .el-table {
    margin-top: 20px;
  }
  .detail-content {
    cursor: pointer;
    color: #009dd9;
  }
}
</style>
